<template>
  <div class="user-add">
    <el-row>
      <el-col :span="12">
        <!--        表单-->
        <el-form ref="ruleForm" :model="form" label-width="80px" :rules="rules">
          <!--          上级菜单-->
          <el-form-item label="上级菜单" prop="pid">
            <el-select v-model="form.pid" placeholder="请选择">
              <el-option :value="0" label="顶级菜单"></el-option>
              <el-option
                v-for="item of menuList" :key="item.id"
                v-if="item.title != form.title"
                :value="item.id" :label="item.title"></el-option>
            </el-select>
          </el-form-item>
          <!--          title-->
          <el-form-item label="菜单名称" prop="title">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
          <!--          类型-->
          <el-form-item label="类型">
            <el-radio-group v-model="form.type">
              <el-radio :label="1">类型</el-radio>
              <el-radio :label="2">菜单</el-radio>
            </el-radio-group>
          </el-form-item>
          <!--          地址或者 图标-->
          <el-form-item label="图标" v-if="form.type == 1">
            <el-input v-model="form.icon"></el-input>
          </el-form-item>
          <el-form-item label="地址" v-else>
            <el-input v-model="form.url"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-switch
              v-model="form.status"
              :active-value="1"
              :inactive-value="0"
              active-color="#f00"
              inactive-color="#eee"
            ></el-switch>
          </el-form-item>
          <el-form-item v-if="typeof $route.params.id == 'undefined'">
            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          </el-form-item>
          <el-form-item v-else>
            <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  export default {
    name: "vUserAdd",
    mounted() {
      if (this.$route.params.id) {//判断是否是修改菜单 请求对应的菜单详情
        this.axios({
          url: '/api/menuinfo',
          params: {id: this.$route.params.id},
          method: 'get'
        }).then(res => {
          this.form = res.list
          this.form.id = this.$route.params.id //手动添加上id 提交时需要
        })
      }
    },
    data() {
      return {
        form: {
          pid: '',
          title: '',
          type: 1,
          icon: '',
          url: '',
          status: 1
        },
        rules: {
          pid: [
            {required: true, message: '请选择菜单', trigger: 'blur'}
          ],
          title: [
            {required: true, message: '请输入标题', trigger: 'blur'}
          ]
        }
      }
    },
    computed: {
      ...mapState(['menuList'])
    },
    methods: {
      //提交表单功能
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$confirm('确定添加该商菜单?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let url = this.$route.params.id?'/api/menuedit':'/api/menuadd'
              this.axios({
                url: url,
                method: 'post',
                data: this.form
              }).then(res => {
                if (res.code == 200) {
                  this.$store.dispatch('updatamenu')//跟新菜单数据
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                  this.$router.go(-1)
                } else {
                  this.$message({
                    type: 'success',
                    message: res.msg
                  });
                }
              })

            })
              .catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消操作'
                });
              });
          } else {
            this.$message({
              type: 'info',
              message: '信息填写错误'
            });
            return false;
          }
        });
      }
    }
  }
</script>

<style scoped>

</style>
